<div class="alert alert-info" role="alert">
  Username: Mathis \\
  Password: 12345
</div>

<div [hidden]="!error" class="alert alert-danger">
  {{ error }}
</div>

<fieldset [disabled]="isLoading">
  <form (ngSubmit)="login()" [formGroup]="loginForm">
      <div class="form-group">
        <label class="d-block">
          <input type="text" class="form-control" placeholder="Username" formControlName="username">
          <app-control-messages [control]="f['username']"></app-control-messages>
        </label>
      </div>
      <div class="form-group">
        <label class="d-block">
          <input type="password" name="password" autocomplete="on" class="form-control" placeholder="Password" formControlName="password">
          <app-control-messages [control]="f['password']"></app-control-messages>
        </label>
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-primary btn-block btn-raised" type="submit" [disabled]="loginForm.invalid">
          <span [hidden]="isLoading">Submit</span>
          <span [hidden]="!isLoading">
            <fa-icon icon="asterisk" size="3x" [spin]="true"></fa-icon>
          </span>
        </button>
      </div>
      <a [routerLink]="['/auth/register']">Don't have an account? Sign up here!</a>
  </form>
</fieldset>
